<!--
 * @Description: 模型菜单页面
 * @Author: 程前
 * @Date: 2024-12-02 14:02:21
 * @LastEditors: 程前
 * @LastEditTime: 2024-12-25 16:51:49
-->

<template>
    <div class="model-container">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="本地模型" name="first">
                <div class="local-container">
                    <div :class="currentItem === item.source + 'local' ? 'container-items active' : 'container-items'"
                        v-for="item in assetList" :key="item.name" @click="itemClick(item, 'local')">
                        <img class="img" :src="getAssetsFile(`images/models/${item.cover}.png`)">
                        <div>{{ item.name }}</div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="云模型" name="second">
                <div class="cloud-container">
                    <div :class="currentItem === item.source + 'cloud' ? 'container-items active' : 'container-items'"
                        v-for="item in cloudList" :key="item.name" @click="itemClick(item, 'cloud')">
                        <img class="img" :src="getAssetsFile(`images/models/${item.cover}.png`)">
                        <div>{{ item.name }}</div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import type { TabsPaneContext } from 'element-plus'
import { ref, nextTick } from 'vue'
import { getAssetsFile, clearLoader, eventBus } from "@/utils"
import { useCesiumGlobalStore } from "@/store/modules/cesiun-global"
import { useCesiumEditStore } from "@/store/modules/cesium-edit";
import { Model } from "@/loader"

const cesiumEditStore = useCesiumEditStore()
const cesiumGlobalStore = useCesiumGlobalStore()
const assetList = [{
    name: 'J-15',
    cover: 'J-15',
    source: 'J-15'
},
{
    name: 'J-20',
    cover: 'J-20',
    source: 'J-20'
}]

const cloudList = [{
    name: '黑天鹅级护卫舰',
    cover: 'huweijian',
    source: 'http://localhost:5174/assets/models/BlackSwan-frigate.glb'
},
{
    name: 'SU27',
    cover: 'y20',
    source: 'http://localhost:5174/assets/models/SU27.gltf'
}]

/**
 * tabs切换
 * @param tab 
 * @param event 
 */
const activeName = ref<string>('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
}

/**
 * 选择模型
 */
const currentItem = ref<string | null>(null)
const itemClick = (item: any, type: string) => {
    currentItem.value = currentItem.value === item.source + type ? null : item.source + type
    if (!currentItem.value) {
        const loader = cesiumGlobalStore.loader
        loader && loader.destroy()
    } else {
        clearLoader()
        const viewer = cesiumGlobalStore.getViewer()
        const modelUrl = type === 'local' ? getAssetsFile(`cesium/models/${item.source}.glb`) : item.source
        cesiumEditStore.model.src = modelUrl
        cesiumEditStore.model.config.label = item.name
        cesiumGlobalStore.loader = new Model(viewer, {
            modelUrl
        })
        nextTick(() => {
            eventBus.emit('edit-config-model');
        })
    }
}
</script>

<style scoped lang="less">
.model-container {
    width: 100%;
    height: 100%;
    background-color: #fff;

    .local-container,
    .cloud-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        max-width: 260px;
        height: 300px;
        overflow: auto;
        -ms-overflow-style: none;
        overflow: -moz-scrollbars-none;

        &::-webkit-scrollbar {
            display: none;
        }



        .container-items {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-direction: column;
            width: 100px;
            height: 110px;
            padding: 6px 12px;
            cursor: pointer;
            border: 1px solid transparent;
            margin-top: 2px;

            .img {
                width: 82px;
                height: 70px;
            }
        }

        .active {
            border: 1px solid #298fe9;
        }
    }
}
</style>